<template>
  <div class="twoStep">
    <header>
      <div style="margin-top:5px;margin-left:15px;margin-bottom: 11px;">
        <span style="color: #FFFFFF;font-size:16px;font-family:Microsoft YaHei;">研判简报</span>
        <img src="/images/text_line.png" style="width: 100%;margin-bottom: 5px;" />
      </div>
      <div
        clsss="screenshots_list_box"
        v-show="modelStep==2||modelStep==3||modelStep==4"
        onselectstart="return false"
        style="position: absolute;top: 6%;left: 83%;"
      >
        <div class="screenshots_list_btn" @click="getScreenshotsList">
          <span>{{screenshots_list_data}}</span>
          <i slot="suffix" class="el-input__icon el-icon-caret-bottom"></i>
        </div>
        <span class="screenshots_list" v-show="screenshotsListShow">
          <el-tree
            :data="allScreenshots"
            :default-expand-all="true"
            :props="defaultProps"
            @node-click="screenshotsNodeClisk"
          ></el-tree>
        </span>
      </div>
    </header>
    <!-- 标签页 -->
    <el-tabs tab-position="left" type="card" class="reportModel" v-model="modelStep">
      <el-tab-pane name="1">
        <span slot="label" class="tags">基本信息</span>
        <!-- 表单 -->
        <el-form ref="form" :model="title" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="title.name"></el-input>
          </el-form-item>
          <el-form-item label="上报单位">
            <el-input v-model="title.region"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">灾情信息</span>
        <div
          class="model"
          contenteditable="true"
          placeholder="请输入内容"
          ref="one"
          onselectstart="return true"
          autofocus
        >{{testStr1}}</div>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label">灾害图像</span>
        <div
          class="model"
          contenteditable="true"
          placeholder="请输入内容"
          ref="two"
          autofocus
          onselectstart="return true"
        ></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  created() {
    document.addEventListener("click", this.docClick, false);
  },
  data() {
    return {
      fileList: [],
      modelStep: "1",
      title: {
        name: "汶川地震演习研判报告",
        region: "指挥控制中心"
      },
      allScreenshots: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      screenshotsListShow: false,
      screenshots_list_data: "请选择专题图",
      testStr1:
        "2008年5月12日（星期一）14时27分到28分。汶川地震震中位于中国四川省阿坝藏族羌族自治州汶川县映秀镇与漩口镇交界处、四川省省会成都市西北偏西方向79千米处，其经纬度大约是北纬31.01°，东经 103.42°。\n" +
        "汶川地震的重灾区是四川省，受地震破坏的极重灾区有10个，是四川省的汶川县（处于震中）、茂县、北川县、安县、平武县、绵竹市、什邡市、都江堰市、彭州市、青川县。较重灾区共41个县（市、区），主要在四川省（29个），其次是甘肃省（8个）和陕西省（4个）。\n" +
        "【居民区】\n" +
        "房屋大面积倒损。地震灾区倒塌房屋严重，北川县城、汶川县映秀镇等部分城镇被夷为平地，见第四节研判图像。\n" +
        "【基础设施损毁】\n" +
        "震中地区周围的 15 条国道省道干线公路和宝成线等5 条铁路中断，电力、通信、供水等系统大面积瘫痪，见第四节研判图像。",
      testStr2:
        "据中国地震台网正式测定：2017年8月8日21时19分，四川阿坝州九寨沟县附近（北纬33.20度，东经103.88度）发生7级地震，震源深度20千米。（中国地震台网）截至发稿，本次地震已造成漳扎镇63人受伤、5人死亡，死者均为游客。（@中国阿坝州发布）。九寨沟干海子景区附近有100余游客被困。（人民日报）九寨沟县城一度停电，中国移动手机信号中断。（九寨沟宣传部；央视新闻）21时47分，九寨沟黄龙机场已有航班起飞。景区内有5万游客亟待疏散。（央视新闻）\n" +
        "四川省地震局专家判断，此次地震发生在岷江断裂带与东昆仑断裂带东部交汇地带。本次地震的极震烈度预计在IX度以上，漳扎镇烈度可能达VIII度。以下为机器人自动制作的震动图局部（中国地震局）：",
      testStr3:
        "\n" +
        "救援队：\n" +
        "XXX部队\n" +
        "XXX减灾中心\n" +
        "专家：\n" +
        "高分中心                         XXX教授\n" +
        "高分中心                         XXX研究员\n" +
        "高分中心                         XXX教授\n" +
        "高分中心                         XXX研究员\n" +
        "高分中心                         XXX教授\n" +
        "储备库：\n" +
        "长沙、天津、武汉、重庆、郑州",
      testStr4:
        "【政府】\n" +
        "四川省地震局已启动地震应急预案，实施一级响应。四川省公安消防总队立即启动地震救援应急响应机制，已调派6个支队的610余名官兵、8只搜救犬向震中地区开进。成都消防从都江堰基地出发；截至8月9日凌晨0点30分，共出动消防车辆396台，消防官兵1108人，生命探测仪55台，搜救犬30只，调动照明灯组33个，发电机24台。四川省卫计委已经从阿坝州、绵阳市以及九寨沟周边县紧急抽调医疗救援力量赶赴地震灾区；四川大学华西医院和省医院派出医疗应急救援队伍。\n" +
        "震中附近的若尔盖县人武部、松潘县人武部派出民兵分队赶赴震中了解灾情。阿坝军分区司令员带领机关前指从马尔康市出发，前往九寨沟组织指挥救援。\n" +
        "【民间行动】\n" +
        "省慈善总会倡议有意前往九寨沟参与救援的志愿者或社会组织，在未与当地政府及相关部门取得联系前，暂时不要盲目前往灾区。\n" +
        "中国红十字会总会已从成都备灾救灾中心眉山仓库向灾区紧急调拨家庭包1000个，棉被2000床，帐篷200顶。四川省红十字会和德阳市红十字会均派出救灾工作组和赈济救援队。红十字基金会派出评估工作组，并拨付10万元应急资金。\n" +
        "蓝豹救援（凉山）、陕西曙光、四川蓝天、青海蓝天、宕昌蓝天、黔江区蓝天、甘肃厚天、南充红十字山地救援队、河南省应急救援协会、公羊队四川和浙江总队、永安等救援队已经出发前往灾区。壹基金联合救灾川北网络成员即时在当地对接政府，雅安办派出5名工作人员评估，并准备成都、西安、威宁的招商物流备灾仓库物资，动员企业伙伴可口可乐调运24万瓶纯净水；川南网络亦派出人员，并调动攀枝花和西昌备灾仓库。中扶贫人道救援网络彩虹公益社、成都滴水公益均已派员前往灾区评估。天水市陇右环境保育协会集结天水公益者联盟4家成员机构，从天水民间备灾仓库出库救灾物资：300张折叠床、40顶12平帐篷、10顶36平帐篷。湖南民间联合救灾长沙备灾仓库正在出库帐篷、钢丝床、救灾包等物资。\n" +
        "【交通】\n" +
        "国道247线（原S205）绵阳至九寨沟公路九寨沟境内双河镇下甘座村处受震损断道。（@四川发布）县城至漳扎镇道路畅通，县城至青龙桥道路畅通。（四川共青团微信公号）\n" +
        "四川交警发布九寨沟地震交通管制：\n" +
        "一、因九寨沟县发生地震，对九黄环线实行全线交通管制，只允许政府救援车辆进入灾区，其他社会车辆一律不得进入。\n" +
        "二、对G213甘南入川方向、G212陇南入川方向车辆进行劝返。请务必服从现场公安交警的指挥管理。\n" +
        "三、对成绵高速、成绵复线高速（成都往绵阳方向）实行交通管制，请车辆绕行。同时，对G75兰海高速广甘段就近分流货车。\n" +
        "\n" +
        "（图片）\n" +
        "XXX图片",
      testStr5:
        "震中附近村落如下节图示。根据目前排查结果，受地质灾害和建筑坍塌影响最大的村庄依次为树正社区、中查沟的中查村（景区外）、荷叶社区、则查洼社区（以上社区目前均无信息）。上述村落中，常驻人口在1000人左右，留宿游客数量不详，初步预计村内总人数约2000人。扎如、漳扎镇、干海子等处情况则相对比较明朗，没有严重建筑垮塌和地质灾害，救援已经到位。\n" +
        "本次救灾生命线S301黄龙机场至九寨沟县城段预计会有垮塌导致的交通阻碍。\n" +
        "从以下几点出发：\n" +
        "1.需紧急援助人员主要为5-6万游客，除在景区留宿的少量游客外，其他均会有政府妥善安排。\n" +
        "2.典型的需紧急救援和疏散安置的人群大概为1000-2000人。\n" +
        "3.灾区主要道路仅有S301一条，且道路两侧次生灾害风险极高。\n" +
        "4.救援力量将很快饱和。\n" +
        "不建议非属地救援队伍前往现场。已出发队伍建议在机场或县城原地驻扎，等候正在建立的社会组织协调中心与抗震救灾指挥部的调度。\n" +
        "重点关注受灾社区\n" +
        "四川团省委、中慈联救灾委、基金会救灾协调会、中灾协地震救援专委会正在联合建立社会组织协调中心，引导社会组织有序参与。请准备响应和备勤的社会组织填写登记表，以便协调有序行动。"
    };
  },
  computed: {
    one() {
      let imgSize = this.getImgSize(this.$refs.one);
      console.log(imgSize);
      return [this.$refs.one.innerHTML, imgSize];
    },
    two() {
      let imgSize = this.getImgSize(this.$refs.two);
      return [this.$refs.two.innerHTML, imgSize];
    }
    // three() {
    //   let imgSize = this.getImgSize(this.$refs.three);
    //   return [this.$refs.three.innerHTML, imgSize];
    // },
    // four() {
    //   let imgSize = this.getImgSize(this.$refs.four);
    //   return [this.$refs.four.innerHTML, imgSize];
    // },
    // five() {
    //   let imgSize = this.getImgSize(this.$refs.five);
    //   return [this.$refs.five.innerHTML, imgSize];
    // }
  },
  methods: {
    //专题图的列表查询
    async getScreenshotsList(e) {
      e.stopPropagation();
      this.screenshotsListShow = !this.screenshotsListShow;
      let screenList = await this.$get("/wuhao/tmc/all");
      if (screenList.length > 0) {
        let parentIds = {};
        screenList.forEach((item, index) => {
          let eleNode = {};
          eleNode.label = item.title;
          eleNode.id = item.id;
          eleNode.path = item.path;
          if (item.req) {
            let parentName = item.req.name;
            if (!parentIds[parentName]) {
              parentIds[parentName] = {};
              parentIds[parentName].label = parentName;
              parentIds[parentName].id = item.id;
              parentIds[parentName].children = [];
            }
            parentIds[parentName].children.push(eleNode);
          } else {
            if (!parentIds.other) {
              parentIds.other = {};
              parentIds.other.label = "其他";
              parentIds.other.children = [];
            }
            parentIds.other.children.push(eleNode);
          }
        });
        let resultArr = [];
        for (let key in parentIds) {
          resultArr.push(parentIds[key]);
        }
        this.allScreenshots = resultArr;
      }
    },
    docClick() {
      console.log(1111);
      if (this.screenshotsListShow) {
        this.screenshotsListShow = false;
      }
    },
    screenshotsNodeClisk(data) {
      let self = this;
      if (!data.hasOwnProperty("children")) {
        let sel = window.getSelection();
        let range = null;
        let bol = null;
        if (sel && sel.isCollapsed) {
          bol =
            sel.focusNode.className === "model" ||
            sel.focusNode.parentNode.className === "model";
        } else {
          this.$message.warning(`请确认鼠标位置`);
          return;
        }
        if (bol) {
          let src = "http://10.0.49.2:8081" + "/" + data.path;
          range = sel.getRangeAt(0);
          let img = new Image();
          img.src = src;
          img.setAttribute("label", data.label);

          // 如果图片被缓存，则直接返回缓存数据
          if (img.complete) {
            self.imgSizeChange(img, range, sel);
          } else {
            img.onload = function() {
              self.imgSizeChange(img, range, sel);
            };
          }
        } else {
          this.$message.warning(`请确认鼠标位置`);
          return;
        }
      }
    },
    //图片等比例缩小
    imgSizeChange(img, range, sel) {
      // let width=986;
      let width = 550;
      let height = width / (img.width / img.height);
      if (img.width < width) {
        width = img.width;
        height = img.height;
      }
      $(img).css({ height: height + "px", width: width + "px" });
      range.insertNode(img);
      range.collapse(false); //对于IE来说，参数不可省略
      sel.removeAllRanges();
      sel.addRange(range);
    },
    date() {
      return new Date();
    },
    getImgSize(ele) {
      let imgs = ele.getElementsByTagName("img");
      console.log(imgs);
      let ary = [];
      if (imgs) {
        for (let k = 0; k < imgs.length; k++) {
          let obj = {};
          obj.width = imgs[k].width;
          obj.height = imgs[k].height;
          obj.label = $(imgs[k]).attr("label");
          ary.push(obj);
        }
      }
      return ary;
    }
  },
  beforeDestroy() {
    document.removeEventListener("click", this.docClick, true);
  }
};
</script>

<style lang="scss">
.twoStep {
  height: 100%;
  margin: 9px 10px;
  header {
    width: 100%;
    font-size: 0.2rem;
    font-weight: 400;
    color: #2fd5ff;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .line1 {
    width: 100%;
    padding-bottom: 10px;
  }
  .reportModel {
    height: 80%;
    [contenteditable]:focus {
      outline: none;
    }
    [contenteditable] {
      color: #fff;
    }
    .model:empty:before {
      content: attr(placeholder);
      font-size: 12px;
      color: #999;
    }
    .model:focus:before {
      content: none;
    }
    .tags {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
    .el-form-item__label,
    .el-col-2 {
      color: #fff;
    }
    .el-col-2 {
      text-align: center;
    }
    .el-col-11 {
      width: 40.2%;
    }
    .el-input__inner {
      background: #0b152c;
      height: 35px;
      border: 2px solid;
      color: #fff;
      border-image: linear-gradient(316deg, #1387b2, #1d4aa1) 2 2;
    }
  }
  .el-tabs--border-card {
    background: unset;
    border: none;
  }
  .el-tabs__content {
    height: 80%;
    border: 1px solid rgba(48, 144, 240, 1);
    padding: 15px;
    overflow: auto;
  }
  .el-tree-node__content:hover {
    width: 100%;
    background-color: #409eff;
  }
  .el-tabs__content::-webkit-scrollbar {
    width: 4px;
  }
  .el-tabs__content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgb(70, 77, 95);
  }
  .el-tabs__content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
  .el-tabs--left.el-tabs--card .el-tabs__nav {
    border: none !important;
  }
  .el-tabs--left.el-tabs--card .el-tabs__item.is-left {
    margin: 10px 0;
    border: 1px solid rgba(96, 118, 173, 0.35) !important;
    text-align: center;
    color: #fff;
    background-color: hsl(219, 61%, 16%);
    padding: 0 10px;
  }
  .el-tabs--card > .el-tabs__header {
    border: none;
  }
  .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
    background: #3399ff;
    border: 1px solid #3399ff;
  }
  /*.el-popover {*/
  /*	width: 580px !important;*/
  /*	background: rgba(16, 34, 67, 1)!important;*/
  /*	border-radius: 6px!important;*/
  /*	border: 1px solid rgba(96, 118, 173, 0.35)!important;*/
  /*	color: #fff!important;*/
  /*	line-height: 24px!important;*/
  /*	font-size: 14px!important;*/
  /*}*/
  /*.el-popper[x-placement^="bottom"] .popper__arrow {*/
  /*	display: none;*/
  /*}*/
  .upload_btn_position {
    top: 2px;
    right: 50px;
  }
  .prompt_btn_position {
    top: 3px;
  }
}
.el-popover {
  width: 580px !important;
  background: rgba(16, 34, 67, 1) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(96, 118, 173, 0.35) !important;
  color: #fff !important;
  line-height: 24px !important;
  font-size: 14px !important;
  line-height: 32px !important;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
  display: none;
}

.screenshots_list {
  position: absolute;
  top: 100%;
  width: 190%;
  left: 0;
  font-size: 12px;
}
.screenshots_list .el-tree {
  border-radius: 4px;
  z-index: 2;
  background-color: #0b152d;
  max-height: 300px;
  margin: 0;
  font-size: 12px;
  background-image: url("/images/yanpan/tree-bg.png");
  background-size: 100% 100%;
  overflow: auto;

  .el-tree-node__label {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.screenshots_list .el-tree::-webkit-scrollbar {
  width: 4px;
}
.screenshots_list .el-tree::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgb(70, 77, 95);
}
.screenshots_list .el-tree::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.screenshots_list_btn {
  position: relative;
  text-align: center;
  display: inline;
  top: 3px;
  span {
    display: inline-block;
    width: 100px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #4c6d8d;
  }
}
.screenshots_list_btn .el-input__icon {
  position: relative;
  left: -21px;
  top: 0px;
  font-size: 12px;
  color: #fff;
}
.el-tabs--left .el-tabs__header.is-left {
  margin-top: -10px;
}
</style>
